import React, { Component, createRef } from 'react'
import { Card, Button, message, Form, Divider } from 'antd'

import PicturesWall from '../../pages/product/pictures-wall'
import {
  reqImagesOfTitles,
  reqUpdateImagesOfTitles,
  reqNavInfo,
} from '../../api'
import { getReqData } from '../../utils'

const { Item } = Form

class Go extends Component {
  constructor(props) {
    super(props)

    this.pwImagesServe = createRef()
    this.pwImagesShow = createRef()
    this.pwImagesAbout = createRef()
    this.pwImagesAsk = createRef()
    this.pwImagesContactUs = createRef()
    this.dataNavInfo = null
    this.state = {
      dataNavInfo: [],
    }
  }

  /**
   * 提交的回调函数
   */
  submit = async () => {
    const images_serve = this.pwImagesServe.current.getImgs()
    const images_show = this.pwImagesShow.current.getImgs()
    const images_about = this.pwImagesAbout.current.getImgs()
    const images_ask = this.pwImagesAsk.current.getImgs()
    const images_contact_us = this.pwImagesContactUs.current.getImgs()

    if (
      !images_serve ||
      !images_show ||
      !images_about ||
      !images_ask ||
      !images_contact_us
    ) {
      message.warning('没有修改任何信息，不予提交。')
      return null
    }

    const { result } = await reqUpdateImagesOfTitles({
      images_serve,
      images_show,
      images_about,
      images_ask,
      images_contact_us,
    })
    const data = getReqData(result)
    if (!data) message.error(result.data.data.msg)
    else message.success('更新成功')
  }

  init = async () => {
    try {
      const results = await Promise.all([reqImagesOfTitles(), reqNavInfo()])
      const resultImgOfTitles = getReqData(results[0].result)
      const resultNavInfo = getReqData(results[1].result)

      if (!resultImgOfTitles || !resultNavInfo) {
        console.log('不满足初始化条件')
        return null
      }

      const {
        images_serve,
        images_show,
        images_about,
        images_ask,
        images_contact_us,
      } = resultImgOfTitles[0]

      // 获取小程序中的导航栏的图片、名字等。
      this.setState({
        images_serve,
        images_show,
        images_about,
        images_ask,
        images_contact_us,
        dataNavInfo: [...resultNavInfo],
      })
    } catch (error) {
      console.log('初始化错误 ', error)
    }
  }

  componentDidMount() {
    this.init()
  }

  render() {
    const {
      images_serve,
      images_show,
      images_about,
      images_ask,
      images_contact_us,
      dataNavInfo,
    } = this.state

    if ('undefind' === dataNavInfo || dataNavInfo.length <= 0) return null

    // 指定item布局的宽度比例
    const formItemLayout = {
      labelCol: { span: 2 }, // 左侧label的宽度
      wrapperCol: { span: 10 }, // 右侧的宽度
    }

    return (
      <Card title="走进永昌信息管理">
        <Form {...formItemLayout}>
          <Divider>以下是每个栏目具体的图片</Divider>
          <Item label={dataNavInfo[0].name}>
            <PicturesWall
              ref={this.pwImagesServe}
              imgs={images_serve}
              max={1}
              collectionName={'images_titles'}
            />
          </Item>
          <Divider />
          <Item label={dataNavInfo[1].name}>
            <PicturesWall
              ref={this.pwImagesShow}
              imgs={images_show}
              max={1}
              collectionName={'images_titles'}
            />
          </Item>
          <Divider />
          <Item label={dataNavInfo[2].name}>
            <PicturesWall
              ref={this.pwImagesAsk}
              imgs={images_ask}
              max={1}
              collectionName={'images_titles'}
            />
          </Item>
          <Divider />
          <Item label={dataNavInfo[3].name}>
            <PicturesWall
              ref={this.pwImagesAbout}
              imgs={images_about}
              max={1}
              collectionName={'images_titles'}
            />
          </Item>
          <Divider />
          <Item label={dataNavInfo[4].name}>
            <PicturesWall
              ref={this.pwImagesContactUs}
              imgs={images_contact_us}
              max={1}
              collectionName={'images_titles'}
            />
          </Item>
          <Divider>导航栏名字和图标（修改名字需要修改分类名）</Divider>
          <Item label={dataNavInfo[0].name}>
            <PicturesWall
              ref={this.pwImagesContactUs}
              imgs={images_contact_us}
              max={1}
              collectionName={'images_titles'}
            />
          </Item>
          <Divider>分割线</Divider>
          <Item>
            <Button type="primary" onClick={this.submit}>
              提交
            </Button>
          </Item>
        </Form>
      </Card>
    )
  }
}

Go.propTypes = {}

export default Form.create()(Go)
